<template>
  <div class="left-top">
    <div class="headers_sale_left">
      <div class="headers_right">
        <div
          v-for="(item, index) in titles"
          :key="index"
          class="headers_right_title"
          :class="{ selected: selectedTitle === item }"
          @click="selectTitle(item)"
        >
          {{ item.title }}
          <span v-if="item.title !== '老OA流程'">({{ item.count }})</span>
          <img
            v-if="selectedTitle === item"
            src="../../assets/img/boder.jpg"
            alt="Selected"
            class="selected-image"
          />
        </div>
      </div>
      <div class="headers_left">
        <div class="headers_left_input">
          <el-input
            placeholder="输入标题关键词"
            suffix-icon="el-icon-search"
            v-model="input1"
            @change="handleSearch"
          >
          </el-input>
        </div>
        <div class="headers_left_more" @click="more">更多 ></div>
      </div>
    </div>
    <div class="content">
      <div class="content_table" ref="customTable">
        <el-table
          :data="mockData"
          :height="tableHeight"
          width="100%"
          :cell-style="cellStyle"
          :header-cell-style="headerCellStyle"
          @row-click="handleRowClick"
        >
          <el-table-column
            prop="seq"
            label="序号"
             width="60"
            v-if="selectedTitle.title !== '委托设置'"
          />
          <el-table-column
            prop="title"
            label="标题"
            min-width="200"
            v-if="selectedTitle.title !== '委托设置'"
          >
            <template #default="{ row }">
              <span
                :style="{
                  fontWeight: row.readState == 0 ? '700' : '400',
                  color: row.isRed == 1 ? 'red' : '',
                  fontSize: row.readState == 0 ? '13px' : '',
                }"
                class="elipsis"
                :title="row.title"
              >
                {{ row.title }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="from"
            label="来自"
            width="150"
            v-if="
              selectedTitle.title !== '委托设置' &&
              selectedTitle.title !== '发起追踪'
            "
          />
          <el-table-column
            prop="stayTime"
            label="任务停留时间"
            width="150"
            v-if="
              selectedTitle.title !== '委托设置' &&
              selectedTitle.title !== '已阅' &&
              selectedTitle.title !== '发起追踪' &&
              selectedTitle.title !== '已办'
            "
          />
          <el-table-column
            prop="stayTime"
            label="耗时"
            width="150"
            v-if="selectedTitle.title == '已办'"
          />
          <el-table-column
            prop="stayTime"
            label="接收时间"
            width="150"
            v-if="selectedTitle.title == '已阅'"
          />
          <el-table-column
            prop="beginTime"
            label="创建时间"
            width="150"
            v-if="selectedTitle.title == '发起追踪'"
          />
          <el-table-column
            prop="delegateUserName"
            label="代理人"
            min-width="150"
            v-if="selectedTitle.title === '委托设置'"
          />
          <el-table-column
            prop="delegateReason"
            label="委托说明"
            min-width="200"
            v-if="selectedTitle.title === '委托设置'"
          />
          <el-table-column
            prop="beginTime"
            label="生效时间"
            min-width="150"
            v-if="selectedTitle.title === '委托设置'"
          />
          <el-table-column
            prop="endTime"
            label="失效时间"
            min-width="150"
            v-if="selectedTitle.title === '委托设置'"
          />
          <el-table-column
            prop="state"
            label="委托状态"
            min-width="150"
            v-if="selectedTitle.title === '委托设置'"
          />
        </el-table>
      </div>
      <div  style="min-height: 50px;">
        <div class="notice_box_bottom_table_fy"  v-show="totalItems > 0 && selectedTitle.title !=='待办'" >
          <!-- 其他内容 -->
          <my-pagination
            :current-page="currentPage4"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :total="totalItems"
            @size-change="onSizeChange"
            @current-change="onPageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
  
  
  
  <script>
import { getNavbar } from "@/api/index";
import MyPagination from "../../components/MyPagination.vue";
export default {
  name: "LeftTop",
  data() {
    return {
      portalPath: window.portalPath,
      currentPage4: 1,
      pageSize: 9999,
      tableHeight: 400, // 默认表格高度
      pageSizes: [10, 20, 30, 40],
      totalItems: 300,
      input1: "",

      titles: [
        { title: "待办", count: 10 },
        { title: "已办", count: 5 },
        { title: "待阅", count: 8 },
        { title: "已阅", count: 12 },
        { title: "发起追踪", count: 3 },
        { title: "委托设置", count: 1 },
        { title: "老OA流程" },
        { title: "布谷HR", count: 1 },
      ],
      selectedTitle: 1, // 用于存储选中的标题
      hoverIndex: -1,
      mockData: [
        { title: "任务1", source: "来源A", duration: "2小时" },
        { title: "任务2", source: "来源B", duration: "1小时" },
        { title: "任务3", source: "来源C", duration: "3小时" },
        { title: "任务4", source: "来源D", duration: "4小时" },
        { title: "任务5", source: "来源E", duration: "1.5小时" },
        { title: "任务6", source: "来源F", duration: "2.5小时" },
        { title: "任务7", source: "来源G", duration: "3小时" },
        { title: "任务8", source: "来源H", duration: "2小时" },
        { title: "任务9", source: "来源I", duration: "4.5小时" },
        { title: "任务10", source: "来源J", duration: "1小时" },
        { title: "任务10", source: "来源J", duration: "1小时" },
        { title: "任务10", source: "来源J", duration: "1小时" },
      ].map((item, index) => ({ ...item, index: index + 1 })),
    };
  },
  components: {
    MyPagination,
  },
  mounted() {
    this.getlist();
    this.selectedTitle = this.titles[0]; // 默认选中第一个标题
    this.gettodoList();
    this.getBUGhr();
    window.addEventListener("resize", this.handleResize);
    this.getTableHeight(); //初始设置一下
    this.startFetchingNotifications(); // 启动定时任务
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    startFetchingNotifications() {
      // 每3秒调用一次 getnotice 方法
      this.intervalId = setInterval(() => {
        if (!this.isNotificationShowing) {
          this.getnotice();
        }
      }, 3000); // 3000毫秒 = 3秒
    },
    getnotice() {
   
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.notify.list",
      };
      getNavbar(param).then((res) => {
        if (res.data.notify.length > 0) {
     
          this.getlist();
          this.gettodoList();
          // if (this.intervalId) {
          //   clearInterval(this.intervalId); // 清除定时任务
          //   this.intervalId = null; // 重置 intervalId
          // }
        }
      });
    },
    getBUGhr() {
      const param = {
        sid: window.sid,
        cmd: 'com.awspaas.user.apps.bono.service.getHRTodoCount',
      };
      return getNavbar(param).then((res) => {
        const { result, data } = res;
 
        let count=res.data.count;
        if (data && data.count !== undefined) {
        // 更新 titles 数组中最后一个元素的 count 值
        this.titles[this.titles.length - 1].count = data.count;
      }
      });
    },
    handleResize() {
      // 在这里根据窗口大小调整样式或状态
      // 例如，调整面板的高度、宽度等

      this.getTableHeight(); //窗口变化之后重新设置一下
    },

    // 获取表格可视区域高度，方便固定表头
    getTableHeight() {
      this.$nextTick(() => {
        let height = this.$refs.customTable.clientHeight || 0;
 
        if (height > 0) {
          this.tableHeight = height - 30; //获取高度之后去除表头高度和分页条高度
        }
  
      });
    },
    more() {
      window.open(
        portalPath +
          "/r/w?sid=" +
          window.sid +
          "&cmd=com.actionsoft.apps.workbench_main_page",
        "_blank"
      );
      // this.$router.push({
      //     path: "/iframe",
      //     query: {
      //       url: "/portal/r/w?sid="+ window.sid+"&cmd=com.actionsoft.apps.workbench_main_page" ,
      //       // url:"www.baidu.com"
      //     },
      //   })
    },
    handleSearch() {
      // 在这里处理搜索逻辑

      this.gettodoList();
      // 你可以调用其他方法或者更新数据
    },
    //获取待办数据
    gettodoList() {
      const commandMap = {
        待办: "com.bono.portal.task.todoList",
        已办: "com.bono.portal.task.historyList",
        待阅: "com.bono.portal.task.unreadNoticeList",
        已阅: "com.bono.portal.task.readNoticeList",
        发起追踪: "com.bono.portal.task.trackList",
        委托设置: "com.bono.portal.task.delegateList",
      };

      const cmd = commandMap[this.selectedTitle.title]; // 获取对应的命令

      const param = {
        sid: window.sid,
        cmd: cmd,
        serachWord: this.input1,
        start: this.currentPage4,
        limit: this.pageSize,
      };

      getNavbar(param).then((res) => {
   
        const { result, data } = res;
        if (result === "ok") {
          // 根据cmd选择数据

          this.totalItems = res.data.totalCount;
          if (this.selectedTitle.title === "委托设置") {
            this.mockData = data.delegates; // 使用 data.delegates
          } else {
            this.mockData = data.tasks; // 使用 data.tasks
          }
        }
      });
    },
    getCount(cmd) {
      const param = {
        sid: window.sid,
        cmd: cmd,
      };
      return getNavbar(param).then((res) => {
        const { result, data } = res;
        return result === "ok" ? data.totalCount : 0; // 获取 totalCount
      });
    },
    getlist() {
      const commands = [
        "com.bono.portal.task.todoCount",
        "com.bono.portal.task.historyCount",
        "com.bono.portal.task.unreadNoticeCount",
        "com.bono.portal.task.readNoticeCount",
        "com.bono.portal.task.trackCount",
        "com.bono.portal.task.delegateCount",
      ];

      const requests = commands.map((cmd, index) => {
        return this.getCount(cmd).then((count) => {
          this.titles[index].count = count; // 赋值给对应的 count
        });
      });

      Promise.all(requests)
        .then(() => {
       
        })
        .catch((error) => {
      
        });
    },
    onSizeChange(size) {
   
      this.pageSize = size;
      this.gettodoList();

      // 处理页面大小变化
    },
    onPageChange(page) {
   
      this.currentPage4 = page;
      this.gettodoList();

      // 处理当前页变化
    },
    handleRowClick(row) {
      // 打印当前选中行的数据
      const newWindow = window.open(
        portalPath + "/r" + row.openUrl.slice(1),
        "_blank"
      );

      // 检查是否成功打开窗口
      if (newWindow) {
        const checkClosed = setInterval(() => {
          // 如果新窗口已经关闭
          if (newWindow.closed) {
            clearInterval(checkClosed);
            // 执行关闭后需要的操作
            this.getlist();

            this.gettodoList();
            // 可以在这里执行其他操作，比如刷新数据或显示提示
          }
        }, 500); // 每500毫秒检查一次
      } else {
  
      }
    },
    cellStyle() {
      return {
        color: "#333333", // 字体颜色
        fontSize: "12px", // 字体大小
      };
    },
    headerCellStyle() {
      return {
        backgroundColor: "rgba(57, 92, 153, 0.1)", // 表头背景色（蓝色）带透明度
        color: "#333333" /* 表头文字颜色（白色） */,
        fontWeight: "700" /* 表头文字加粗 */,
        fontSize: "13px" /* 表头文字大小 */,
      };
    },
    selectTitle(item) {
      if (item.title == "老OA流程") {
        const param = {
          sid: window.sid,
          cmd: "com.bono.aws5.taskpageurl",
        };

        getNavbar(param).then((res) => {
          const { result, data } = res;
          window.open(portalPath + "/r" + res.data.url.slice(1), "_blank");
        });
      } else if (item.title == "布谷HR"){
     
        window.open(portalPath + "/r/w?sid="+ window.sid+"&cmd=com.awspaas.user.apps.bono.service.getHRHomePage" , "_blank");
      }else if (item.title == "待办"){
        this.selectedTitle = item; // 更新选中项
        this.mockData = [];
        this.currentPage4 = 1;
        this.pageSize = 9999;
        this.gettodoList(); // 切换标题时加载数据
      }
      
      else {
        this.selectedTitle = item; // 更新选中项
        this.mockData = [];
        this.pageSize = 20 ;
        this.currentPage4 = 1;
        this.gettodoList(); // 切换标题时加载数据
      }
    },
    passParameter(title) {
  
      // 在这里可以进行进一步的操作，比如发起 API 请求等
    },
  },
};
</script>
  
  <style scoped>
  /deep/ .el-table td,
.el-table th {
  padding: 6px 0 !important;
}
  /deep/  .gutter{
    display: none !important;
  }
.elipsis {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left; /* 如果需要左对齐 */
}
/deep/.el-table__body-wrapper ::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
/deep/.el-table__body-wrapper {
  scrollbar-width: none; /* 隐藏滚动条 */
}

/* 隐藏滚动条 - 适用于 Chrome 和 Safari */
.content_table::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 隐藏滚动条 - 适用于 Firefox */
.content_table {
  scrollbar-width: none; /* 隐藏滚动条 */
}
.content_table {
  min-height: 500px; /* 设置最小高度，根据需要调整 */
  max-height: 500px; /* 设置最大高度，根据需要调整 */
}

.titles {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 13px;
  color: #333333;
}

.hovered .titles {
  color: #1e4398; /* 鼠标悬停时标题颜色 */
  cursor: pointer;
}

.new-icon {
  margin-left: 4px; /* 新图标与标题之间的间距 */
  width: 36px;
  height: 18px;
}

.date {
  margin-left: auto; /* 日期靠右对齐 */
  font-size: 12px; /* 日期字体大小 */
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
.left-top {
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
  border-radius: 10px;
}

.headers_sale_left {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.headers_sale_left .headers_left span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right {
  display: flex;
}
.headers_right .headers_right_title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  color: #666666;
  margin-left: 15px;
  cursor: pointer;
  transition: background 0.3s; /* 添加过渡效果 */
}
.headers_left {
  display: flex;
  align-items: center;
}
.headers_left_input {
  margin-right: 20px;
}
.headers_left_input /deep/ .el-input__icon {
  line-height: 29px !important;
}
.headers_left_more {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #1e4398;
  cursor: pointer;
}
.carous_img {
  width: 100%;
  height: 100%;
}

.headers_sale_left span {
}

.content {
  margin-top: 10px; /* 内容与标题之间的间距 */
}

.bottom {
  font-family: PingFang SC;
  font-weight: 700;
  font-size: 14px;
  color: #1e4398;
  text-align: right;
  cursor: pointer;
  margin-top: 10px;
}
.headers_right_title.selected {
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  position: relative;
}
.selected-image {
  width: 30px;
  position: absolute;
  left: 28%;
  top: 35px;
}

.el-table tbody tr > td {
}

/deep/.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

/deep/.el-table tr {
  background-color: transparent !important;
}

/deep/.el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}

/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #265ec0 !important;
}
.notice_box_bottom_table_fy {
  text-align: right;

}
</style>
  